<template>
  <el-table
    :data="data.tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    default-expand-all
  >
    <el-table-column label="产品图">
      <template #default="scope">
        <el-image
          class="proImg"
          :src="getImg(scope.row.picture)"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[getImg(scope.row.picture)]"
          show-progress
          :initial-index="0"
          :preview-teleported="true"
          :hide-on-click-modal="true"
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column prop="title" label="产品名" />
    <el-table-column label="所属分类">
      <template #default="scope">
        {{ getCateName(scope.row.classid) }}
      </template>
    </el-table-column>
    <el-table-column prop="sprice" label="单价" />
    <el-table-column prop="cprice" label="整价" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button icon="Edit" @click="handleEdit(scope.row)"> 修改 </el-button>
        <el-button
          icon="Delete"
          @click="handleDelete(scope.row)"
          :color="themeColor"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <el-pagination
    background
    layout="prev, pager, next"
    :total="data.totalPage"
    :page-sizes="[10, 20, 50, 100]"
    v-model:current-page="data.currentPage"
    @change="changePage"
  /> -->
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import router from "@/route/index";
import { getNewsList, deleteProduct, getCategoryList } from "@/api/index";
const themeColor = ref(null);
themeColor.value = localStorage.getItem("themeColor");

const data = reactive({
  tableData: [],
  totalPage: 1,
  currentPage: 1,
  pageSize: 999,
  cateList: [],
});
const getProductList = () => {
  getNewsList({
    pageSize: data.pageSize,
    currentPage: data.currentPage,
  }).then((res) => {
    if (res.code == 200) {
      data.tableData = res.data;
      data.totalPage = res.pagination.totalPage;
    }
  });
};
const getCateList = () => {
  getCategoryList().then((res) => {
    if (res.code == 200) {
      data.cateList = res.data;
      getProductList();
    }
  });
};
const handleEdit = (item) => {
  router.push({ name: "productEdit", params: { id: item.id } });
};
const handleDelete = (item) => {
  ElMessageBox.confirm("确认删除产品吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteProduct({ id: item.id }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "产品删除成功",
          });
          getProductList();
        }
      });
    })
    .catch(() => {});
};
const getCateName = (id) => {
  try {
    return data.cateList.find(item => item.id === id)?.classname || '';
  } catch (e) {
    console.error(`分类查询失败，ID: ${id}`, e);
    return '';
  }
};
const changePage = () => {
  getProductList();
};
const getImg = (item) => {
  return item ? `http://pro.z550.cn/${item}` : "/images/noImage.svg";
};
onMounted(() => {
  getCateList();
});
</script>

<style lang="less" scoped>
.container {
  flex-grow: 1;
  overflow-y: auto;
  .navLink {
    display: flex;
    .list {
      display: flex;
      gap: 10px;
      .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        background: var(--bs-light-color);
        padding: 6px 14px;
        border: var(--bs-border-color) 1px solid;
        cursor: pointer;
        gap: 4px;
        border-radius: 3px;
        dt {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }
}
.vTable {
  padding-top: 14px;
}
.proImg {
  width: 44px;
  height: 44px;
}
</style>